<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果展示图</title>
  <script src="../Vue.js"></script>

</head>
<body>
<div id="app" >
  <input type="button" value="浪起来" @click="lang">
  <input type="button" value="低调" @click="stop">
  <h4>{{msg}}</h4>
</div>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:'猥琐发育，别浪~~~！  ',
      intervalID:null//在这里定义interval，可在不同的事件中调用
    },
    methods:{
      lang(){
        //避免开启多个定时器，所以对intervalID进行判断
        if (this.intervalID != null) return;

        //setInterval 是在规定时间内循环执行内部内容
        this.intervalID = setInterval( ()=> {
         // 获取第一个字
         var first = this.msg.substring(0,1);
         //获取除第一个后面的字
         var last = this.msg.substring(1);
          //将前后倒过来 拼接
          this.msg = last +first;
        },400)
      },
      stop(){
        clearInterval(this.intervalID)
        this.intervalID = null
      }
    }
  })
</script>
</body>
</html>
